ul.user-list
  list-style none
  li
    padding-left 5px
  .user-card
    display flex
    flex-direction row
    justify-content flex-start
    align-items center
    img.avatarImage
      width 0
      border-radius 50%
      flex 1 0 15%
      padding 5px 0
    .avatar-info
      flex 1 0 85%
      margin-left 5px
      border-bottom 1px solid #e1e5e4
      align-self stretch
      display flex
      flex-direction column
      justify-content center
      .avatar-name
        display flex
        justify-content flex-start
        font-size 12px
        span.gender-female
          i
            background url(../../../common/images/female.svg) no-repeat
            background-size: contain
        span.gender-man
          i
            background url(../../../common/images/man.svg) no-repeat
            background-size: contain
        i
          display inline-block
          width 20px
          height 20px
      .avatar-intro
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 1
        font-size 12px
        color #6c6e6d
        padding-right 10px

  &.fade-enter-active, &.fade-leave-active {
    transition: all 0.2s linear
    transform translate3d(0, 0, 0)
  }
  &.fade-enter, &.fade-leave-active {
    opacity: 0
    transform translate3d(100%, 0, 0)
  }

